<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script src="https://unpkg.com/vuejs-paginate@latest"></script>
</head>
<body >	
	<!-- 内容 -->
	<div id="content">
		<!-- 导航栏 -->
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">虚拟币统计</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">PC首页</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								{{choiceCoin}}
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li v-for=" coinType in coinTypeList" @click="choiceType(coinType)">
									<a href="#">{{coinType}}</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 交易所详情 -->
		<table class="table table-striped">
			<thead>
				<tr>
					<th>交易所</th>
					<th>最新价</th>
					<th>过去24小时内最高价格</th>
					<th>过去24小时内最低价格</th>
					<th>过去24小时内成交量</th>
					<th>最新成交时间</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for=" val in resList">
					<td>{{val.Name}}</td>
					<td>{{val.Last}}</td>
					<td>{{val.High}}</td>
					<td>{{val.Low}}</td>
					<td>{{val.Volume}}</td>
					<td>{{val.UpdateTime}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript" charset="utf-8">
		Vue.component('paginate', VuejsPaginate)
		vue = new Vue({
 			el: '#content',
			data: {
				choiceCoin:'币种选择',
 				coinTypeList: ['BTC','LTC','BCC','ZEC','ETH','ETC','EOS','OMG','XRP','IOTA','XMR','NEO','SAN','DASH','GNT','EDO','SNT','QTUM','ZRX','DATA','QASH','ETP','SNG','REP','RCN','FUN','YYW','AID','SPK','RLC','TNB','BAT','MNA','ELF','AVT','TRX','BTG'],
				resList: []
			},
			created: function () {
				
			},
			mounted: function () {
				//连接
 				window.socket = io.connect('http://127.0.0.1:501/VirtualCoin');
 				//断开socket.socket.disconnect();
				window.socket.emit('Virtual', {'coinName':'BTC'});
				//监听回复的消息
				var that = this;
 				window.socket.on('Virtual', function (data) {
					console.log(data);
					that.resList = data.data.Body.Items
				});
			},
			methods: {
				choiceType:function(type){
					this.choiceCoin = type;
					//断开连接，慎用，心跳会停止
					//window.socket.disconnect();
					//连接
					//window.socket = io.connect('http://127.0.0.1:501/VirtualCoin');
					//window.socket.emit('Virtual', { 'leave': '' });
					window.socket.emit('Virtual', { 'coinName':type});
					
				}
			}
		});
	</script>
	<style>
	.coinChoice tbody tr td{
		cursor:pointer;
		width:40px;
		height:20px;
		line-height:20px;
		text-align:center;
	}
	</style>
</body>
</html>